import { Component, Index } from 'solid-js'
import S from './Card.module.styl'
import { Skill, Skills } from './skill'
import { Hud } from './View'
import { useGame } from './game'

type Single = Component<{
  skills: Skills
  skill: Skill
  // 集不够
  lack?: boolean
  // 不能用
  disable?: boolean
  onClick?: () => void
}>

const Single: Single = prop => {
  const data = () => prop.skills[prop.skill]
  const Section = (prop_: { name: string, x: -1 | 0 | 1 }) =>
    <div class={S.section}>
      <div class={S.title}>{prop_.name}</div>
      <Index
        each={prop.skills.filter((_, i) => data().versus[i] == prop_.x)}
        fallback={<div>无</div>}
      >
        {skill => <div>{skill().name}</div>}
      </Index>
    </div>

  return <div
    class={S.card}
    classList={{ [S.lack]: prop.lack, [S.available]: !prop.disable }}
    onClick={() => prop.lack || prop.disable || prop.onClick?.()}
  >
    <div class={S.name}>{data().name}</div>
    <div class={S.section}>
      <div>{data().cost < 0 ? '可获得' : '需消耗'}</div>
      <div><strong>{Math.abs(data().cost)}</strong> 个集</div>
    </div>
    <Section name="强于" x={1}></Section>
    <Section name="弱于" x={-1}></Section>
  </div>
}

type Select = Component<{
  disable?: boolean
  onClick?: (skill: Skill) => void
}>

const Select: Select = prop => {
  const { store } = useGame()
  return <Hud classList={{ [S.select]: true }}>
    <Index each={store.skill}>{(skill, i) => <Single
      skill={i}
      skills={store.skill}
      lack={store.my < skill().cost}
      disable={prop.disable}
      onClick={() => prop.onClick?.(i)}
    ></Single>}</Index>
  </Hud>
}

export default Select